<template>
    <div class="mainBox">
        <div class="indexBox">
            <div class="titleBox">
                <div class="titleItem">
                    <div class="card" @click="router.push('video_management')">
                        <div class="itemContext-img">
                            <img src="@/assets/icon/shipin.png">
                        </div>
                        <div class="itemContext_context">
                            <div>
                                <span>我的视频</span>
                            </div>
                            <div class="count">
                                <span>{{ videoTotal }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="titleItem">
                    <div class="card">
                        <div class="itemContext-img">
                            <img src="@/assets/icon/pinglun.png">
                        </div>
                        <div class="itemContext_context">
                            <div>
                                <span>我的评论</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="titleItem">
                    <div class="card">
                        <div class="itemContext-img">
                            <img src="@/assets/icon/fensi.png">
                        </div>
                        <div class="itemContext_context">
                            <span>我的关注</span>
                        </div>
                    </div>
                </div>
                <div class="titleItem">
                    <div class="card">
                        <div class="itemContext-img">
                            <img src="@/assets/icon/xihuan.png">
                        </div>
                        <div class="itemContext_context">
                            <span>我的喜欢</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="List">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="数据统计" name="first" style="display: flex;">
                        <!-- 饿了么的日期组件 -->
                        <div class="videoListItem">
                            <div style="display: flex; width: 750px">
                                <el-date-picker v-model="analysisDate" type="daterange" start-placeholder="开始日期"
                                    format="YYYY-MM-DD" end-placeholder="结束日期" :default-value="[new Date(), new Date()]"
                                    style="margin-left: 40px;" @change="dateChange" :clearable="false" />
                                <el-pagination :page-size="20" :pager-count="5" :page-count="pageTotal"
                                    layout="prev, pager, next" @current-change="dateChange(null)"
                                    v-model:current-page="currentPage" />
                            </div>
                            <div v-if="videoTotal == 0">
                                <el-empty description="你还未发布视频" />
                            </div>
                            <div ref="chart" id="chart" v-loading="ChartsisLoading"></div>

                        </div>
                        <div class="videoSort">

                            <div style="display: flex; justify-content: space-between ;">

                                <el-check-tag :checked="praiseChecked" type="primary" @change="praiseTagChange">
                                    点赞
                                </el-check-tag>
                                <el-check-tag :checked="commemtsChecked" type="primary" @change="commemtsTagChange">
                                    评论
                                </el-check-tag>
                                <el-check-tag :checked="shareChecked" type="primary" @change="shareTagChange">
                                    分享
                                </el-check-tag>
                                <el-check-tag :checked="concernChecked" type="primary" @change="concernTagChange">
                                    收藏
                                </el-check-tag>
                            </div>
                            <h3 style="margin-left: auto; margin-right: auto; color: #444;">最火爆视频排行</h3>
                            <div v-if="videoTotal == 0">
                                <el-empty description="你还未发布视频" />
                            </div>
                            <div class="VideoRanking" v-loading="rankingIsLoading" v-if="videoTotal != 0">
                                <div class="VideoRankingItem" v-for="(item, index) in rankingData" :key="item.id">
                                    <span :class="index + 1 <= 3 ? 'hottest' : 'ordinal'">{{ index + 1 }}</span>
                                    <div
                                        style=" font-weight:800; width: 70%; margin-left: 10px; display: flex;align-items: center;">
                                        {{ item.synopsis.length > 6 ? item.synopsis.substring(0, 6) + "..." :
                                            item.synopsis }}</div>
                                    <span
                                        style="font-weight:600 ; width: 25%;justify-content: flex-end; margin-right: 5px; display: flex;align-items: center;">
                                        {{ praiseChecked == true ? item.praise > 10000 ? (item.praise /
                                            10000).toFixed(1)
                                            + '万' : item.praise : '' }}
                                        {{ commemtsChecked == true ? item.comments > 10000 ?
                                            (item.comments / 10000).toFixed(1) + '万' : item.comments : '' }}
                                        {{ shareChecked == true ? item.share > 10000 ? (item.share / 10000).toFixed(1) +
                                            '万'
                                            : item.share : '' }}
                                        {{ concernChecked == true ? item.concern : '' }}
                                    </span>
                                </div>

                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="最新视频" name="second">
                        <div class="newVideoTable">
                            <el-table :data="videoListNew" style="width: 100%" border>
                                <el-table-column :formatter="synopsisFormatter" prop="synopsis" label="视频简介"
                                    width="200" />
                                <el-table-column prop="createTime" label="视频创建时间" width="180" sortable />
                                <el-table-column prop="praise" label="点赞数" sortable>
                                    <template #default="{ row }">
                                        {{ row.praise > 10000 ? (row.praise / 10000).toFixed(1) + 'W' : row.praise }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="concern" label="收藏数" sortable>
                                    <template #default="{ row }">
                                        {{ row.concern > 10000 ? (row.concern / 10000).toFixed(1) + 'W' : row.concern }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="comments" label="评论数" sortable>
                                    <template #default="{ row }">
                                        {{ row.comments > 10000 ? (row.comments / 10000).toFixed(1) + 'W' : row.comments
                                        }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="share" label="分享数" sortable>
                                    <template #default="{ row }">
                                        {{ row.share > 10000 ? (row.share / 10000).toFixed(1) + 'W' : row.share }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="type" label="视频类型" sortable>
                                    <template #default="{ row }">
                                        <el-tag :type="row.type == 0 ? 'success' : 'warning'" effect="dark">
                                            {{ row.type == 0 ? '推荐' : '好友' }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="ckgd">
                                <span>查看更多</span>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="我的关注" name="third">Role</el-tab-pane>
                    <el-tab-pane label="我的评论" name="fourth">Task</el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script setup>

import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts';
import moment from 'moment';

import axios from 'axios';
import router from '@/router';



//echats的对象
const chart = ref(null);
const chartInstance = ref(null);
const echartsList = ref([])
// 数据分析中的date
const analysisDate = ref([])
const chartData = ref([])
//分页内容
const echartsDataList = ref([])
const pageTotal = ref(null)
const videoTotal = ref(null)
const currentPage = ref(1)

//排行榜内容
const praiseChecked = ref(true)
const commemtsChecked = ref(false)
const shareChecked = ref(false)
const concernChecked = ref(false)
const rankingData = ref([])
//加载动画
const ChartsisLoading = ref(true)
const rankingIsLoading = ref(true)
//最新视频
const videoListNew = ref([])


async function getNewVideoList() {
    const res = await axios.post('/api/video/video_get_new?id=' + localStorage.getItem('id'))
    if (res.data.code == 200) {
        videoListNew.value = res.data.data
    }
}


//限制表格项显示字符长度
function synopsisFormatter(row, column, cellValue) {
    if(cellValue == null){
       cellValue = '该视频没有简介';
    }
    if (cellValue.length > 10) {
        return cellValue.slice(0, 10) + '...'
    } else {
        return cellValue
    }
}

function praiseTagChange() {
    praiseChecked.value = true
    commemtsChecked.value = false
    shareChecked.value = false
    concernChecked.value = false
    if (praiseChecked.value) {
        getTagData('praise')
    }
}
function commemtsTagChange() {
    commemtsChecked.value = true
    praiseChecked.value = false
    shareChecked.value = false
    concernChecked.value = false
    if (commemtsChecked.value) {
        getTagData('comments')
    }
}

function shareTagChange() {
    shareChecked.value = true
    commemtsChecked.value = false
    praiseChecked.value = false
    concernChecked.value = false
    if (shareChecked.value) {
        getTagData('share')
    }
}

function concernTagChange() {
    concernChecked.value = true
    commemtsChecked.value = false
    praiseChecked.value = false
    shareChecked.value = false

    if (concernChecked.value) {
        getTagData('concern')
    }
}

function getTagData(type) {
    rankingIsLoading.value = true
    axios.post('/api/video/video_select_id_order?id=' + localStorage.getItem('id') + '&order=' + type)
        .then(res => {
            rankingData.value = res.data.data.records
            rankingIsLoading.value = false
        })
        .catch(err => {
            console.log(err.data)
        })
}


function dateChange() {
    ChartsisLoading.value = true
    let start;
    let end;
    if (analysisDate.value.length == 0) {
        start = new Date()
        end = new Date()
        start.setDate(start.getDate() - 7)

        start = moment(start).format('YYYY-MM-DD')
        end = moment(end).format('YYYY-MM-DD')
    } else {
        start = moment(analysisDate.value[0]).format('YYYY-MM-DD')
        end = moment(analysisDate.value[1]).format('YYYY-MM-DD')
    }


    axios.post('/api/video/video_select_id_date?id=' + localStorage.getItem('id') + '&start=' + start + '&end=' + end + '&page=' + currentPage.value).then(res => {
        echartsDataList.value = res.data.data
        echartsList.value = echartsDataList.value.list.records
        pageTotal.value = echartsDataList.value.pageTotal
        videoTotal.value = echartsDataList.value.videoTotal
        ChartsisLoading.value = false
        transformData()
    }).catch(err => {
        console.log(err.data)
    })
}

function fetchData() {
    ChartsisLoading.value = true
    let today = new Date()
    let later = new Date()
    later.setDate(later.getDate() - 7)

    today = moment(today).format("YYYY-MM-DD")
    later = moment(later).format("YYYY-MM-DD")
    axios.post('/api/video/video_select_id_date?id=' + localStorage.getItem('id') + '&start=' + later + '&end=' + today).then(res => {
        echartsDataList.value = res.data.data
        echartsList.value = echartsDataList.value.list.records
        pageTotal.value = echartsDataList.value.pageTotal
        videoTotal.value = echartsDataList.value.videoTotal
        ChartsisLoading.value = false
        transformData()
    }).catch(err => {
        console.log(err.data)
    })
}

function transformData() {
    const dataMap = new Map(); // 使用 Map 来合并和相加数据
    echartsList.value.forEach(item => {
        const { synopsis, praise } = item;
        // 否则，添加新的日期项
        dataMap.set(synopsis, praise);

    });

    // 将 Map 转换为 ECharts 所需的格式 [{ name: '日期', value: '数量' }]
    chartData.value = Array.from(dataMap, ([synopsis, praise]) => ({ synopsis, praise }));
}

function initChart() {
    if (pageTotal.value != 0) {
        if (!chartInstance.value) {
            chartInstance.value = echarts.init(chart.value);
        }

        const options = {
            tooltip: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    backgroundColor: '#fff', // 悬浮框背景色
                    borderColor: '#000', // 悬浮框边框颜色
                    borderWidth: 1, // 悬浮框边框宽度
                    textStyle: { // 悬浮框文字样式
                        color: '#000',
                        fontSize: 12
                    }
                }
            },
            title: {
                text: '视频点赞数概况(七日前发布视频)',
                subtext: '单位：个',
                left: 'center',
            },
            // ECharts 配置项
            xAxis: {
                axisLabel: {
                    interval: 0, // 强制显示所有标签
                    formatter: function (value) {
                        // 自定义截断逻辑
                        if (value.length > 6) {
                            return value.substring(0, 6) + "...";
                        } else {
                            return value;
                        }
                    }
                },
                type: 'category',
                data: echartsList.value.map(item => item.synopsis),
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                label: {
                    show: true,
                    formatter: function (value) {
                        if (value.value > 10000) {
                            return (value.value / 10000) + 'w'
                        } else {
                            return value.value
                        }
                    }
                },
                data: echartsList.value.map(item => item.praise),
                type: 'bar',
                barWidth: '60%',
            }]
        };

        chartInstance.value.setOption(options);
    }
}



const activeName = ref('first')

const handleClick = (tab, event) => {
    console.log(tab, event)
}

onMounted(() => {
    fetchData();
    praiseTagChange()
    getNewVideoList()
})

watch(chartData, () => {
    initChart();
}, { deep: true });

</script>

<style lang="scss" scoped>
.mainBox {
    height: auto;
    width: 100%;
    background-color: #eee;
    display: flex;
    justify-content: center;

    .indexBox {
        width: 80%;

        .titleBox {
            margin-top: 20px;
            height: 110px;
            display: flex;
            justify-content: space-between;

            .titleItem {
                width: 290px;
                height: 110px;

                .card {
                    width: 230px;
                    height: 110px;
                    background-color: #fff;
                    border-radius: 10px;
                    cursor: pointer;
                    display: flex;
                    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 10px;
                    border: 1px solid #eee;
                    justify-content: space-between;
                    align-items: center;
                    padding-left: 30px;
                    padding-right: 30px;
                    font-weight: 1000;
                    color: #444;
                    transition: 0.5s;

                    .itemContext-img {

                        img {
                            height: 50px;
                            filter: brightness(100%);
                        }
                    }

                    .itemContext_context {
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;

                        .count {
                            margin-top: 5px;
                            font-size: 18px;

                        }
                    }
                }

                .card:hover {
                    color: #409EFF;
                    box-shadow: rgba(77, 169, 255, 0.533) 4px 4px 20px;
                }

                .card:hover img {
                    height: 55px;
                    filter: brightness(150%) sepia(100%) hue-rotate(180deg) saturate(1000%) opacity(0.5);
                }




            }
        }

        .List {
            height: 85vh;
            background-color: #fff;
            margin-top: 20px;
            border-radius: 10px;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 10px;
            display: flex;
            justify-content: center;

            .newVideoTable {
                height: 100%;
                width: 100%;

                ::v-deep .el-table__body td {
                    height: 59px;
                    /* 调整表格内容行的高度 */
                }

                .ckgd {
                    display: flex;
                    align-items: center;
                    height: 100%;
                    width: 55px;
                    font-size: 13px;
                    font-weight: 1000;
                    margin-left: auto;
                    margin-right: auto;
                    margin-top: 10px;
                    color: #666;
                    cursor: pointer;
                }

                .ckgd :hover {
                    color: #000;
                }

            }

            .el-tabs {
                width: 95%;

                .videoListItem {
                    width: 70%;

                    #chart {
                        margin-top: 20px;
                        height: 500px;
                    }
                }

                .videoSort {
                    margin-left: auto;
                    margin-right: auto;
                    width: 25%;
                    display: flex;
                    flex-direction: column;

                }
            }
        }
    }
}

.VideoRanking {
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: 450px;

    .VideoRankingItem {
        color: #333;
        font-size: 15px;
        height: 50px;
        display: flex;
        margin-bottom: 10px;
        align-items: center;
        justify-content: space-between;

        .ordinal {
            color: #000;
            font-size: 13px;
            font-weight: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 100px;
            height: 25px;
            width: 25px;
            background-color: #eeeeeeac;
        }
    }
}

.hottest {
    background-color: #000b37;
    color: #fff;
    font-size: 13px;
    font-weight: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    height: 20px;
    width: 20px;
}

.VideoRanking::-webkit-scrollbar {
    width: 5px;
    display: none;
}
</style>